<style>
    .selectAssgineType {
        display: flex;
    }

    .selectAssgineType .selectAssgineTypeItem {
        flex: 1;
        height: 40;
        line-height: 40px;
        text-align: center;
        background-color: #DCDCDC;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
    }

    .selectAssgineTypeItemHover {
        background-color: coral !important;
        color: white;
    }

    .userList .userGridTitle {
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: flex;
        font-size: 16px;
        font-weight: 500;
        background-color: #e8edf1;
    }

    .userList .userGridTitle .c1 {
        flex: 1
    }

    .userList .userGridTitle .c2 {
        flex: 2
    }

    .userList .userItem {
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: flex;
        font-size: 16px;
        border-left: 1px solid #D3D3D3;
        border-right: 1px solid #D3D3D3;
        border-bottom: 1px solid #D3D3D3;
    }

    .userList .userItem .c1 {
        flex: 1
    }

    .userList .userItem .c2 {
        flex: 2
    }

    .modal-body-wapper {
        display: flex;
    }

    .modal-body-wapper .orgList {
        flex: 1;
        padding-right: 10px;
    }

    .modal-body-wapper .selectUser {
        flex: 2
    }
</style>

<div class="modal" ng-controller="MyFlowableAssignmentPopupCtrl">
    <div class="modal-dialog" style="width: 1200px !important;">
        <div class="modal-content">
            <div class="modal-header">
                <h2 translate>分配审批人员</h2>
            </div>
            <div class="modal-body">
                <div class="modal-body-wapper">
                    <div class="orgList">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                    <div class="selectUser">
                        <div class="selectAssgineType">
                            <div class="selectAssgineTypeItem" ng-click="current=1"
                                 ng-class="current===1?'selectAssgineTypeItemHover':''">选择固定人员</div>
                            <div class="selectAssgineTypeItem" ng-click="current=2"
                                 ng-class="current===2?'selectAssgineTypeItemHover':''">选择多个审批人员</div>
                        </div>
                        <div class="userList" ng-show="current===1">
                            <div class="userGridTitle">
                                <div class="c1">#</div>
                                <div class="c2">用户名称</div>
                                <div class="c2">用户昵称</div>
                            </div>
                            <div class="userItem" data-ng-repeat="item in userList">
                                <div class="c1">
                                    <input type="radio" ng-click="clickUserRadioBox($event, item.id)"
                                           ng-checked="isUserRadioSelected(item.id)" />
                                </div>
                                <div class="c2">{{item.username}}</div>
                                <div class="c2">{{item.nickname}}</div>
                            </div>
                        </div>
                        <div class="userList" ng-show="current===2">
                            <div class="userGridTitle">
                                <div class="c1">#</div>
                                <div class="c2">用户名称</div>
                                <div class="c2">用户昵称</div>
                            </div>
                            <div class="userItem" data-ng-repeat="item in userList">
                                <div class="c1">
                                    <input type="checkbox" ng-click="clickUserCheckBox($event, item.id)"
                                           ng-checked="isUserCheckSelected(item.id)" />
                                </div>
                                <div class="c2">{{item.username}}</div>
                                <div class="c2">{{item.nickname}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button ng-click="close()" class="btn btn-primary" translate>ACTION.CANCEL</button>
                <button ng-click="save()" class="btn btn-primary" translate>ACTION.SAVE</button>
            </div>
        </div>
    </div>
</div>
